<!DOCTYPE html>
<html  xmlns="http://www.w3.org/1999/xhtml"
       xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <script th:src="@{static/js/vue.js}"></script>
    <script th:src="@{static/js/elementUI.js}"></script>
    <script th:src="@{static/js/axios.js}"></script>
    <link th:href="@{static/css/elementUI.css}" rel="stylesheet" />
    <title>优惠券管理</title>
    <style>
        body{
            margin: 0;
        }
        box-card{
            border-bottom: 1px solid rgba(0, 0, 0, .12);
            background-color: #EBEEF5;
        }
        .text {
            font-size: 15px;
        }

        .item {
            margin-bottom: 5px;
        }
        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";
        }
        .clearfix:after {
            clear: both
        }

        .box-card {
            width: 100%;
        }
        #main{
            width: 80%;
            margin: auto;
            margin-top: 10px;
        }
        #dataTable{
            margin-top: 10px;
        }
        #form{
            line-height: 60px;
        }
        .viewTable{
            width: 100%;
        }
        .viewTable th{
            background-color: lightgray;
            width: 20%;
            height: 40px;
        }
        .viewTable td{
            text-align: center;
            height: 40px;
        }
        .el-dialog{
            width: 55%;
        }
    </style>
</head>
<body>
<div id="app">
    <div id="top">
        <el-card class="box-card">
            <span style="margin-left: 9%;margin-top: 5px;background-color: #3a8ee6;font-size: 15px">&nbsp;&nbsp;</span>
            <span style="font-size: 15px;margin-left: 10px">优惠券列表</span>
            <el-button style="float: right; padding: 3px 0;margin-right: 10%" type="text">刷新</el-button>
        </el-card>
    </div>
    <div id="main">
        <div id="form">
            <el-card class="box-card">
                <div slot="header" class="clearfix" style="height: 20px;line-height: 20px">
                    <span style="font-size: 15px"><i class="el-icon-search"></i> 筛选查询</span>
                </div>
                <div align="left">
                    <el-form :inline="true" class="demo-form-inline">
                        <el-form-item label="优惠券名称" style="margin-left: 20px">
                            <el-input v-model="couName" placeholder="填写优惠券名称" style="margin-top: 15px"></el-input>
                        </el-form-item>
                        <el-form-item label="优惠券类型">
                            <el-select v-model="couType" placeholder="选择优惠券类型" style="margin-top: 15px">
                                <el-option label="全部" value=""></el-option>
                                <el-option label="注册赠券" value="注册赠券"></el-option>
                                <el-option label="购物赠券" value="购物赠券"></el-option>
                                <el-option label="全场赠券" value="全场赠券"></el-option>
                                <el-option label="会员赠券" value="会员赠券"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit" style="margin-top: 15px">查询</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-card>
        </div>

        <div id="dataTable">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span style="font-size: 15px"><i class="el-icon-s-data"></i> 数据列表</span>
                    <el-form style="float: right;">
                        <el-button @click="dialogFormVisible = true">添加优惠券</el-button>
                        <el-select v-model="pageSizeChange" placeholder="显示条数" style="width: 150px" @change="sizeChange">
                            <el-option label="显示10条" value= 10 ></el-option>
                            <el-option label="显示15条" value= 15 ></el-option>
                            <el-option label="显示20条" value= 20 ></el-option>
                            <el-option label="显示30条" value= 30 ></el-option>
                        </el-select>
                        <el-select v-model="cousLimit" placeholder="排序方式" style="width: 150px" @change="sortChange">
                            <el-option label="编号正序" value="1"></el-option>
                            <el-option label="编号倒序" value="2"></el-option>
                            <el-option label="结束时间正序" value="3"></el-option>
                            <el-option label="结束时间倒序" value="4"></el-option>
                        </el-select>
                    </el-form>
                </div>
                <template>
                    <el-table :data="tableData" border style="width: 100%">
                        <el-table-column prop="id" type="selection" width="55"></el-table-column>
                        <el-table-column prop="id" label="编号" width="80"></el-table-column>
                        <el-table-column prop="couType" label="优惠券类型" width="100"></el-table-column>
                        <el-table-column prop="couName" label="优惠券名称" width="100"></el-table-column>
                        <el-table-column prop="enableP" label="可使用产品" width="100"></el-table-column>
                        <el-table-column prop="couThse" label="使用门槛" width="100"></el-table-column>
                        <el-table-column prop="couDeno" label="面值" width="100"></el-table-column>
                        <el-table-column prop="couPlat" label="使用平台" width="100"></el-table-column>
                        <el-table-column prop="time" label="有效期" width="250"></el-table-column>

                        <el-table-column prop="timeStatus" label="状态" width="100"></el-table-column>

                        <el-table-column label="操作"><template scope="scope">
                            <el-button style="float:left; padding: 3px 0" type="text" @click=viewTrue(scope.row)>查看</el-button>
                            <el-button style="float: left; padding: 3px 0" type="text" @click=mod(scope.row)>编辑</el-button>
                            <el-button style="float: left; padding: 3px 0" type="text" @click=del(scope.row.id)>删除</el-button>
                        </template></el-table-column>
                    </el-table>
                </template>
                <template>
                    <div class="block">
                        <el-pagination
                                @current-change="handleCurrentChange"
                                :current-page="currentPage"
                                :page-size="pageSize"
                                layout="total, prev, pager, next, jumper"
                                :total="total">
                        </el-pagination>
                    </div>
                </template>
            </el-card>
        </div>
    </div>

    <el-dialog title="优惠券" :visible.sync="dialogFormVisible">
        <el-form :model="form">
            <el-form-item label="优惠券类型" :label-width="formLabelWidth">
                <el-select v-model="form.couType" placeholder="请选择分类">
                    <el-option label="注册赠券" value="注册赠券"></el-option>
                    <el-option label="购物赠券" value="购物赠券"></el-option>
                    <el-option label="全场赠券" value="全场赠券"></el-option>
                    <el-option label="会员赠券" value="会员赠券"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="优惠券名称" :label-width="formLabelWidth">
                <el-input v-model="form.couName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="使用平台" :label-width="formLabelWidth">
                <el-select v-model="form.couPlat" placeholder="请选择分类">
                    <el-option label="全平台" value="全平台"></el-option>
                    <el-option label="PC端" value="PC端"></el-option>
                    <el-option label="移动端" value="移动端"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="总发行量" :label-width="formLabelWidth">
                <el-input v-model="form.couNums" autocomplete="off" type="number"></el-input>
            </el-form-item>
            <el-form-item label="面额" :label-width="formLabelWidth">
                <el-input v-model="form.couDeno" autocomplete="off" type="number"></el-input>
            </el-form-item>
            <el-form-item label="使用门槛" :label-width="formLabelWidth">
                <el-radio v-model="form.couThse" label="0">无限制</el-radio>
                <el-radio>
                    满 <el-input v-model="form.couThse" autocomplete="off" type="number"></el-input> 元可用
                </el-radio>
            </el-form-item>
            <el-form-item label="备注" :label-width="formLabelWidth">
                <el-input v-model="form.note" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="开始时间" :label-width="formLabelWidth">
                <el-date-picker type="date" placeholder="选择日期" v-model="form.startTime" style="width: 100%;"></el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间" :label-width="formLabelWidth">
                <el-date-picker type="date" placeholder="选择日期" v-model="form.endTime" style="width: 100%;"></el-date-picker>
            </el-form-item>
            <el-form-item label="库存" :label-width="formLabelWidth">
                <el-input v-model="form.couStock" autocomplete="off" type="number"></el-input>
            </el-form-item>
            <el-form-item label="可使用产品" :label-width="formLabelWidth">
                <el-radio v-model="form.enablePorduct" label="0" value="0">全场通用</el-radio>
                <el-radio v-model="form.enablePorduct" label="1" value="1" @click.native="dialogProductVisible = true">指定产品</el-radio>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="overForm">取 消</el-button>
            <el-button type="primary" @click="addOrModCous">确 定</el-button>
        </div>
    </el-dialog>

    <el-dialog title="指定产品" :visible.sync="dialogProductVisible">
        1111111111111111
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogProductVisible = false">取 消</el-button>
            <el-button type="primary" @click="addOrModCousProduct">确 定</el-button>
        </div>
    </el-dialog>

    <el-dialog title="优惠券详情" :visible.sync="dialogViewVisible">
        <el-card class="box-card">
            <table class="viewTable">
                <tr>
                    <th>名称</th>
                    <th>优惠券类型</th>
                    <th>可使用产品</th>
                    <th>使用门槛</th>
                    <th>面值</th>
                </tr>
                <tr>
                    <td>{{view.couName}}</td>
                    <td>{{view.couType}}</td>
                    <td>{{view.enableP}}</td>
                    <td>{{view.couThse}}</td>
                    <td>{{view.couDeno}}</td>
                </tr>
            </table>
            <table class="viewTable">
                <tr>
                    <th>状态</th>
                    <th>有效期</th>
                    <th>总发行量</th>
                    <th>已领取</th>
                    <th>待领取</th>
                </tr>
                <tr>
                    <td>{{view.status}}</td>
                    <td>{{view.startTime}}至{{view.endTime}}</td>
                    <td>{{view.couNums}}</td>
                    <td>{{view.couNums-view.couStock}}</td>
                    <td>{{view.couStock}}</td>
                </tr>
            </table>
        </el-card>

        <el-card class="box-card" style="margin: 20px 0;">
            <div slot="header" class="clearfix" style="height: 20px;line-height: 20px">
                <span style="font-size: 15px"><i class="el-icon-search"></i> 筛选查询</span>
            </div>
            <div align="left">
                <el-form :inline="true" class="demo-form-inline">
                    <el-form-item label="使用状态">
                        <el-select v-model="viewData.status" placeholder="选择使用状态" style="margin-top: 15px">
                            <el-option label="全部" value=""></el-option>
                            <el-option label="已使用" value=1></el-option>
                            <el-option label="未使用" value=0></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="订单编号" style="margin-left: 20px">
                        <el-input v-model="viewData.orderId" placeholder="填写订单编号" style="margin-top: 15px"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="getView" style="margin-top: 15px">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>

        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span style="font-size: 15px"><i class="el-icon-s-data"></i> 数据列表</span>
                <el-form style="float: right;">
                    <el-select v-model="viewData.pageSizeChange" placeholder="显示条数" style="width: 150px" @change="sizeChange2">
                        <el-option label="显示10条" value= 10 ></el-option>
                        <el-option label="显示15条" value= 15 ></el-option>
                        <el-option label="显示20条" value= 20 ></el-option>
                        <el-option label="显示30条" value= 30 ></el-option>
                    </el-select>
                    <el-select v-model="viewData.cousLimit" placeholder="排序方式" style="width: 150px" @change="sortChange2">
                        <el-option label="编号正序" value="1"></el-option>
                        <el-option label="编号倒序" value="2"></el-option>
                        <el-option label="结束时间正序" value="3"></el-option>
                        <el-option label="结束时间倒序" value="4"></el-option>
                    </el-select>
                </el-form>
            </div>
            <template>
                <el-table :data="viewData.viewTable" border style="width: 100%">
                    <el-table-column prop="id" label="优惠码" ></el-table-column>
                    <el-table-column prop="userBean.userName" label="领取会员" ></el-table-column>
                    <el-table-column prop="getW" label="领取方式"></el-table-column>
                    <el-table-column prop="getTime" label="领取时间" width="250"></el-table-column>
                    <el-table-column prop="useS" label="当前状态" ></el-table-column>
                    <el-table-column prop="orderBean.createTime" label="使用时间" width="250"></el-table-column>
                    <el-table-column prop="orderBean.orderNo" label="订单编号"></el-table-column>
                </el-table>
            </template>
            <template>
                <div class="block">
                    <el-pagination
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-size="pageSize"
                            layout="total, prev, pager, next, jumper"
                            :total="total">
                    </el-pagination>
                </div>
            </template>
        </el-card>
    </el-dialog>

</div>
</body>
<script th:inline="javascript">
    new Vue({
        el:"#app",
        data:{
            tableData:[],
            pageSize:10,
            pageSizeChange:"",
            currentPage:1,
            total:0,
            couName: "",
            couType: "",
            sort:"id",
            sortOrder:"desc",
            cousLimit:"",
            //模态框
            dialogFormVisible:false,
            formLabelWidth: '120px',
            form: {
                id:0,
                couType: '',
                couName: '',
                couPlat: '',
                couNums: '',
                couDeno: '',
                couThse: '',
                startTime: '',
                endTime: '',
                note: '',
                couStock: '',
                enablePorduct:'',
            },
            //模态框
            dialogProductVisible:false,
            //模态框
            dialogViewVisible:false,
            view:{},
            viewData: {
                viewTable:[],
                total:"",
                pageSize:10,
                currentPage:1,
                status:"",
                orderId:"",
                pageSizeChange:"",
                cousLimit:"",
            },

        },
        methods:{
            viewTrue(row){
                this.view=row;
                this.getView();
                this.dialogViewVisible=true;
            },
            getView(){
                axios.get([[@{cous/getView}]],{
                    params:{
                        limit:this.viewData.pageSize,
                        offSet:0,
                        pageNum:this.viewData.currentPage,
                        sort:this.sort,
                        sortOrder:this.sortOrder,
                        useStatus:this.viewData.status,
                        couProductCode:this.viewData.orderId,
                        couId:this.view.id
                    }
                }).then(res=>{
                    this.viewData.viewTable=res.data.data.rows;
                    this.viewData.total = res.data.data.total;
                    for(let i=0;i<this.viewData.viewTable.length;i++){
                        if(this.viewData.viewTable[i].getWay==0){
                            this.viewData.viewTable[i].getW="后台赠送";
                        }else {
                            this.viewData.viewTable[i].getW="主动领取";
                        }
                        if(this.viewData.viewTable[i].useStatus==0){
                            this.viewData.viewTable[i].useS="未使用";
                        }else {
                            this.viewData.viewTable[i].useS="已使用";
                        }
                    }
                }).catch(err=>console.info(err))
            },
            getData(){
                axios.get([[@{cous/findLimit}]],{
                    params:{
                        limit:this.pageSize,
                        offSet:0,
                        pageNum:this.currentPage,
                        sort:this.sort,
                        sortOrder:this.sortOrder,
                        couName: this.couName,
                        couType: this.couType,
                    }
                }).then(res=>{
                    this.total = res.data.data.total;
                    this.tableData=res.data.data.rows;
                    for(let i=0;i<this.tableData.length;i++){
                        this.tableData[i].time=this.tableData[i].startTime+" 至 "+this.tableData[i].endTime;

                        if(new Date(this.tableData[i].endTime.replace("-","/")) <= new Date()){
                            this.tableData[i].timeStatus = "已过期";
                        }else {
                            this.tableData[i].timeStatus = "未过期";
                        }

                        if(this.tableData[i].enablePorduct == 0){
                            this.tableData[i].enableP="全部商品";
                        }else {
                            this.tableData[i].enableP="指定商品";
                        }
                    }
                }).catch(err=> console.info(err))
            },
            onSubmit(){
                couName= this.couName;
                couType= this.couType;
                this.getData();
            },
            handleCurrentChange(val){
                this.currentPage=val;
                this.getData();
            },
            overForm(){
                this.form.id=0;
                this.form.couType="";
                this.form.couName="";
                this.form.couPlat="";
                this.form.couNums="";
                this.form.couDeno="";
                this.form.couThse="";
                this.form.startTime="";
                this.form.endTime="";
                this.form.note="";
                this.form.couStock="";
                this.form.enablePorduct="";
                this.dialogFormVisible = false;
            },
            sizeChange(){
                // alert(this.pageSizeChange);
                this.pageSize= +this.pageSizeChange;
                this.getData();
            },
            sizeChange2(){
                this.viewData.pageSize= +this.viewData.pageSizeChange;
                this.getView();
            },
            sortChange(){
                if(this.cousLimit == "1"){
                    this.sort= "id";
                    this.sortOrder="";
                }else if(this.cousLimit == "2"){
                    this.sort= "id";
                    this.sortOrder="desc";
                }else if(this.cousLimit == "3"){
                    this.sort= "endTime";
                    this.sortOrder="";
                }else if(this.cousLimit == "4"){
                    this.sort= "endTime";
                    this.sortOrder="desc";
                }
                this.getData();
            },
            sortChange2(){
                if(this.viewData.cousLimit == "1"){
                    this.sort= "id";
                    this.sortOrder="";
                }else if(this.viewData.cousLimit == "2"){
                    this.sort= "id";
                    this.sortOrder="desc";
                }else if(this.viewData.cousLimit == "3"){
                    this.sort= "endTime";
                    this.sortOrder="";
                }else if(this.viewData.cousLimit == "4"){
                    this.sort= "endTime";
                    this.sortOrder="desc";
                }
                this.getView();
            },
            del(id){
                axios.delete([[@{cous/}]]+id).then(res=>{
                    this.getData();
                }).catch(err=> console.info(err))
            },
            addOrModCous(){
                if(this.form.id == 0){
                    axios({
                        method:"POST",
                        url:[[@{cous/addCous}]],
                        data:this.form
                    }).then(res=>{
                        this.overForm();
                        this.getData();
                    }).catch(err=>console.info(err));
                }else {
                    axios({
                        method:"PUT",
                        url:[[@{cous/modCous}]],
                        data:this.form
                    }).then(res=>{
                        this.overForm();
                        this.getData();
                    }).catch(err=>console.info(err));
                }
            },
            mod(row){
                this.form.id=row.id;
                this.form.couType=row.couType;
                this.form.couName=row.couName;
                this.form.couPlat=row.couPlat;
                this.form.couNums=row.couNums;
                this.form.couDeno=row.couDeno;
                this.form.couThse=row.couThse;
                this.form.startTime=row.startTime;
                this.form.endTime=row.endTime;
                this.form.note=row.note;
                this.form.couStock=row.couStock;
                this.form.enablePorduct=row.enablePorduct;

                this.dialogFormVisible = true;
            },
            addOrModCousProduct(){
                alert("111")

                this.dialogProductVisible= false;
            },
        },
        created:function () {
            this.getData();
        }
    });
</script>
</html>